<template>
  <div>
    <!-- limit 最大允许上传个数 -->
    <el-upload
      :class="{ isUndate: showComputed }"
      action="#"
      :limit="1"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="previewImg"
      :on-remove="removeImg"
      :before-upload="beforeUpload"
      :http-request="uploadImg"
      :on-change="changeImg"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-show="showProgress" :percentage="schedule" style="width:180px" />
    <el-dialog :visible.sync="dialogVisible" title="图片预览">
      <img width="100%" :src="dialogImageUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDeBWeYEgwzoQq32oMfkbEdnjRu99vXu3y', // 密钥id
  SecretKey: 'kFWYO0OXS9bppb9TYP1PYUDi04uWu52l' // 秘钥值
})
export default {
  name: 'VueAdminTemplateMasterIndex',

  data() {
    return {
      dialogVisible: false, // 图片预览弹窗
      dialogImageUrl: '', // 预览图片的地址
      fileList: [], // 上传图片的保存数组
      imgUid: '', // 图片id
      schedule: 0, // 进度条
      showProgress: false // 进度条状态
    }
  },
  computed: {
    // 判断图片列表数组是否为1
    showComputed() {
      return this.fileList.length >= 1
    }
  },

  mounted() {},

  methods: {
    // 点击已上传的图片时触发，可以设置预览图片 file:当前点击的图片信息
    previewImg(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 文件列表移除图片时触发 file:当前点击删除图片的信息  fileList:删除后剩余图片的信息
    removeImg(file, fileList) {
      //   this.fileList = fileList 重置图片数组 方法一
      // 过滤出 和删除图片uid不同的图片
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
    },

    // 添加文件、上传成功和上传失败时都会被调用 不能使用push 会执行2次 file：当前上传的文件信息 fileList：最新的数组
    changeImg(file, fileList) {
      // 上传成功后将 图片信息传给数组
      this.fileList = fileList.map((item) => item)
    },

    // 上传文件之前的钩子 返回Promise对象 file: 当前上传的图片信息
    beforeUpload(file) {
      console.log(file.type)
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      const imgMax = 5 * 1024 * 1024
      // 判断文件类型
      if (!types.some((item) => item === file.type)) {
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式！')
        return false
      }
      // 判断图片大小
      if (imgMax < file.size) {
        this.$message.error('上传图片不得大于5MB！')
        return false
      }
      // 将上传的图片uid保存
      this.imgUid = file.uid
      // 打开上传进度条
      this.showProgress = true
      return true
    },

    // 自定义上传事件  上传时触发
    uploadImg(file) {
      console.log(file)
      // 上传对象 判断file是否有值
      if (file) {
        cos.putObject(
          {
            Bucket: 'test-img-1312282413', // 存储桶名称
            Region: 'ap-beijing' /* 存储桶所在地域，必须字段 */,
            Key: file.file.name, // 上传文件在存储桶里的名字
            StorageClass: 'STANDARD', // 上传的模式，直接默认模式即可
            Body: file.file, // 上传文件对象类型
            onProgress: (params) => { // 上传的回调函数 返回上传进度
              this.schedule = Math.trunc((params.percent) * 100) // 取整
              console.log(params.percent)
            }
          },
          (error, data) => {
            // 判断上传腾讯云是否成功
            console.log('1111')
            console.log(data)
            if (!error && data.statusCode === 200) {
              this.fileList = this.fileList.map((item) => {
                if (this.imgUid === item.uid) {
                  return { url: 'http://' + data.Location, upload: true } // upload保存时更此词条判断是否上传成功
                }
                return item
              })
              // 延迟1秒
              setTimeout(() => {
                // 上传成功后 关闭进度条 并置0
                this.showProgress = false
                this.schedule = 0
              }, 1000)
              this.$message.success('上传成功！')
            } else {
              this.$message.error('上传失败')
            }
          }
        )
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.isUndate ::v-deep .el-upload--picture-card {
  display: none;
}
</style>
